<template>
    <div class="container">
        <van-collapse v-model="activeNames">
            <van-collapse-item :title="info.title" name="1">
                <div>
                    <img :src="info.images.medium" :alt="info.title">
                </div> 
                <p> 
                    <van-rate v-model="info.rating.average" :count="10" />    
                    推荐指数：{{info.rating.average}}
                </p>
                <p>
                    年代：
                    <van-tag plain type="danger">{{info.year}}</van-tag>
                </p>
                <p>
                主演：<van-tag mark :type="tags[index]" v-for="(item,index) in info.casts" :key="index">
                        {{item.name}}
                    </van-tag>
                </p>
                <p>
                导演：<van-tag mark :type="tags[index]" v-for="(item,index) in info.directors" :key="index">
                        {{item.name}}
                    </van-tag>
                </p>
                 <p>
                类型：<van-tag :type="tags[index]" v-for="(val,index) in info.genres" :key="index">
                        {{val}}
                    </van-tag>
                </p>
                <p>
                地区：<van-tag pain :type="tags[index]" v-for="(val,index) in info.countries" :key="index">
                        {{val}}
                    </van-tag>
                </p>
                
                <p>收藏次数：{{info.collect_count}}</p>
            </van-collapse-item>
            <van-collapse-item title="影片简介" name="2">
               {{info.summary}}
            </van-collapse-item>
            <van-collapse-item title="影片评论" name="3">
                <p>评论条数：{{info.comments_count}}</p>
                <b>豆瓣暂时不允许获取影片评论相关内容</b>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>
import Vue from "vue";
import { getMovieDetail } from "../../api/api.js";
import { Collapse, CollapseItem } from "vant";
import { Rate } from "vant";
import { Tag } from "vant";
import { Toast } from "vant";
Vue.use(Collapse).use(CollapseItem).use(Rate).use(Tag).use(Toast);
export default {
    data() {
        return {
            pageTitle: "电影详情页",
            tags:['danger','success','primary'],
            info:{
                images:{
                    small:'',
                    medium:'',
                    large:''
                },
                rating:{
                    average:0
                }
            },
            activeNames: ['1']
        };
    },
    methods: {},
    mounted() {
        if(!parseInt(this.$route.query.id)){
            Toast('参数错误');
            this.$router.go(-1);    
            return ;
        }
        getMovieDetail(this.$route.query.id).then(res => {
            this.info = res;
            console.log(res);
        });
    }
};
</script>
<style lang="less">
.container{
    margin-bottom:60px;
}
</style>


